<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="isBack">
					<u-icon size="38" name="arrow-left"></u-icon>
				</view>
				<view class="title_bar_center">
					我的二维码
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#0E7EFD"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<block v-else>
			<view class="swiper_info">
				<swiper class="swiper" :indicator-dots="false" :current="index" :autoplay="false" :circular="false"
					next-margin="100rpx" @change="swiperChange">
					<swiper-item v-for="(v, k) in codeList" :key="k">
						<view class="swiper-item">
							<image :src="v" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="save_btn" v-if="codeList.length > 0" @tap.stop="onSavePhoto">确认保存相册</view>
		</block>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeList: [],
				index: 0,
				isShow: true
			}
		},
		onLoad() {
			this.getQrcode();
		},
		methods: {
			// 获取海报内容  postErcodebg
			getQrcode() {
				this.$api.post(global.apiUrls.postErcodebg, {

				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.codeList = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			swiperChange(e) {
				this.index = e.detail.current;
			},
			saveImg() {
				let _this = this;
				uni.downloadFile({
					url: _this.codeList[_this.index], //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							// uni.saveFile({
							// 	tempFilePath: res.tempFilePath,
							// 	success: function() {
							// 		console.log('save success');
							// 		_this.$message.info('保存成功');
							// 	},
							// 	fail: function() {
							// 		_this.$message.info('保存失败');
							// 	}
							// })
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									console.log('save success');
									_this.$message.info('保存成功');
								},
								fail: function() {
									_this.$message.info('保存失败');
								}
							});
						}
					},
					fail: function() {
						_this.$message.info('保存失败');
					}
				});

			},
			onSavePhoto() {
				let _this = this;
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '保存中'
				})
				uni.getImageInfo({
					src: _this.codeList[_this.index],
					success: function(e) {
						// e.type=png/jpg 扩展名
						// filePathNew: 指定文件下载后存储的路径 (本地路径)
						var filePathNew = wx.env.USER_DATA_PATH + "/" + new Date().valueOf() + '.' + e.type;
						uni.downloadFile({
							url: _this.codeList[_this.index], //仅为示例，并非真实的资源
							filePath: filePathNew,
							success: (res) => {
								// console.log(res);
								// console.log(filePathNew);
								uni.hideLoading();
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: filePathNew,
										success: function() {
											uni.showToast({
												title: '保存到相册成功',
												icon: 'none',
												duration: 1000
											});
										},
										fail: function(err) {
											console.log(
												'saveImageToPhotosAlbum() fail ',
												err)
										}
									});
								}
							},
							fail: (error)=> {
								uni.hideLoading();
								uni.showToast({
									title: '保存失败，请稍后再试',
									icon: 'none',
									duration: 1000
								});
							}
						});
					},
					complete: function(e) {
						console.log('getImageInfo', e.path)
					}
				});
				// #endif
			},


			isBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			// background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;

			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title_bar_left {
					width: 50rpx;
				}

				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}

				.title_bar_right {
					width: 50rpx;
				}
			}
		}

		.swiper_info {
			padding: 100rpx 0 0 50rpx;
			height: 75vh;

			.swiper {
				height: 100%;
				width: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 90%;
						height: 100%;
					}
				}
			}
		}

		.save_btn {
			width: 610rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			background: #0278FC;
			border-radius: 20rpx;
			font-size: 32rpx;
			color: #fff;
			margin: 64rpx auto 0;
		}
	}
</style>